<template>
    <div id="PhotoUpload">
        <el-form :model="photoData" :rules="fromRules" ref="form">
            <el-form-item prop="text">
                <div>
                    照片小标题
                    <el-input type="input" v-model="photoData.text" placeholder="请输入照片小标题" clearable></el-input>
                </div>
            </el-form-item>
            <el-form-item prop="albumId">
                <div>
                    所属相册：
                    <el-select v-model="photoData.albumId">
                        <el-option v-for="(item, index) in albumData" :key="index" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item>
                <div>
                    权限：
                    <span id="authorityText">私有</span>
                    <el-switch v-model="photoData.authority" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </div>
            </el-form-item>
            <el-form-item>
                <div>
                    图片选择
                    <el-upload drag action="" :http-request="filesRequest" :multiple="false" ref="uploadFile"
                        :auto-upload="false" :file-list="fileList" list-type="picture" accept=".jpg, .png">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
                    </el-upload>
                </div>
            </el-form-item>
        </el-form>
        <el-button @click="submit" type="success">提交</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            photoData: {
                text: '',
                albumId: '',
                authority: false,
            }, // 输入照片数据
            albumData: [], // 已有的相册数据
            fileList: [], // 上传的图片文件
            fromRules: {
                text: [
                    { required: true, message: '请输入照片小标题', trigger: 'blur' },
                ],
                albumId: [
                    { required: true, message: '请选择所属相册', trigger: 'change' },
                ],
            }, // 表单规则
        }
    },
    methods: {
        // 获取相册数据
        getAlbumData() {
            this.$axios({
                method: 'post',
                url: '/album/getAllAlbum'
            }).then(res => {
                this.albumData = res.data
            })
        },
        // 点击提交按钮
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // 调用el-upload的提交
                    this.$refs.uploadFile.submit();
                } else {
                    this.$message({
                        message: '请完善图片信息再上传沃~',
                        type: 'error',
                        showClose: true,
                    })
                }
            })
        },
        // http-request文件上传回调
        filesRequest(param) {
            if (this.getfileName(param.file.name) != '.jpg' && this.getfileName(param.file.name) != '.png') {
                this.$message({
                    message: '请选择文件格式为jpg或png的文件上传',
                    type: 'error',
                    showClose: true,
                })
                return
            }
            // 准备数据，发送请求
            let data = new FormData()
            data.append('file', param.file)
            data.append('text', this.photoData.text)
            data.append('albumId', this.photoData.albumId)
            data.append('authority', this.photoData.authority ? 1 : 0)
            this.$axios({
                method: 'post',
                url: '/photo/login/addPhoto',
                data: data,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }).then(res => {
                if (res.data) {
                    this.$message({
                        message: '提交成功',
                        type: 'success',
                        showClose: true,
                    })
                } else {
                    this.$message({
                        message: '提交失败！出现错误了X.X',
                        type: 'error',
                        showClose: true,
                    })
                }
            })
        },
        // 获取文件后缀工具函数
        getfileName(filename) {
            // 转换为小写
            const pos = filename.toLowerCase().lastIndexOf('.')
            let suffix = ''
            if (pos !== -1) {
                suffix = filename.substring(pos)
            }
            return suffix
        }
    },
    mounted() {
        this.getAlbumData()
    }
}
</script>

<style lang="scss" scoped>
#PhotoUpload {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#authorityText {
    margin-right: 10px;
}
</style>
<style scoped="scoped" scope>
/deep/.el-input__inner {
    width: 300px;
    background-color: #202020;
    text-align: center;
    color: #fff;
}

/* 图片选择按钮以及图片展示框 */
.el-button--primary {
    background-color: #202020;
    border-color: #fff;
}

/deep/.el-upload-list--picture .el-upload-list__item {
    background-color: #202020;
}

/deep/.el-upload {
    display: block;
}

/deep/.el-upload-dragger {
    background-color: #202020;
    margin: 0 auto;
}

.el-upload__tip {
    text-align: center;
}
</style>